<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #wrap{
            width: 1000px;
            height: 100%;
            margin: 50px auto;
            position: relative;
        }
        .spic{
            width: 400px;
            height: 399px;
            border: 1px solid black;
            position: relative;
            float: left;
            margin-right: 20px;
            cursor: pointer ;
        }
        .spic img{
            width: 100%;
            height: 100%;
        }
        .spic .sf{
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: orange;
            opacity: 0.3;
            visibility: hidden;
        }
        #wrap .bf{
            float: left;
            width: 500px;
            height: 500px;
            border: 1px solid red;
            z-index: 1;
            position: relative;
            overflow: hidden;
            visibility: hidden;
        }
        #wrap .bf .bpic{
            width: 800px;
            height: 800px;
            position: absolute;
            left: 0%;
            top: 0;

        }
        #wrap .bf .bpic img{
            width: 100%;
            height: 100%;
        }
        #wrap .list {
            position: absolute;
            left: 0px;
            top: 420px;
            width: 420px;
            height: 100px;
            overflow: hidden;
        }
        #wrap .list ul {
            width: 700px;
            height: 100%;
            overflow: hidden;
            position: absolute;
        }
        #wrap .list li{
            width: 60px;
            height: 60px;
            margin-right: 10px;
            float: left;
            cursor:pointer;
        }
        #wrap .list li img{
            width: 100%;
            height: 100%;
        }
        #wrap .list .left a,#wrap .list .right a{
            text-decoration: none;
        }
        #wrap .list .left ,#wrap .list .right{
            position: absolute;
            top: 0px;
            padding-top: 20px;
            width: 10px;
            height: 59px;
            border: 1px solid black;
            box-sizing: border-box;
        }
        #wrap .list .left {
            left: 0px;
        }
        #wrap .list .right{
            right: 0px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="spic">
            <img src="../../../week07工具/5.放大镜√/images/1.jpg" alt="">
            <div class="sf"></div>
        </div>
        <div class="bf">
            <img src="../../../week07工具/5.放大镜√/images/1.jpg" alt="" class="bpic">
        </div>
        <div class="list">
            <ul>
                <li><img src="../../../week07工具/5.放大镜√/images/1.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/2.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/3.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/4.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/5.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/6.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/7.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/8.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/9.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/10.jpg" alt=""></li>
                <!--  <li><img src="../../../week07工具/5.放大镜√/images/1.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/2.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/3.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/4.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/5.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/6.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/7.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/8.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/9.jpg" alt=""></li>
                <li><img src="../../../week07工具/5.放大镜√/images/10.jpg" alt=""></li> -->
            </ul>
            <div class="left"><a href="javascript:;">&lt;</a></div>
            <div class="right"><a href="javascript:;">&gt;</a></div>
        </div>
    </div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="./scale.js"></script>